<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../assets/zjt2.png" alt="" class="back" @click="back()"/>
        </div>
        <div class="head-search">创建简历</div>
        <div @click="save">保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>头像</span>
        <input
          v-show="false"
          type="file"
          accept="image/*"
          @change="tirggerFile($event)"
          ref="input"
        />
        <div>
          <img
            src="../assets/avatar.png"
            v-if="imgUrl == ''"
            alt=""
            @click="openImg"
          />
          <img :src="imgUrl" alt="" v-if="imgUrl != ''" @click="openImg"/>
        </div>
      </div>
      <div class="inpBox">
        <span>姓名</span>
        <div>
          <input type="text" v-model="name" placeholder="请输入姓名"/>
        </div>
      </div>
      <div class="inpBox">
        <span>性别</span>
        <div>
          <input type="radio" name="sex" v-model="check" value="0"/><span
        >男</span
        >
          <input type="radio" name="sex" v-model="check" value="1"/><span
        >女</span
        >
        </div>
      </div>
      <div class="inpBox">
        <span>出生日期</span>
        <div>
          <input type="text" v-model="birthday" placeholder="请输入出生日期"/>
        </div>
      </div>
      <div class="inpBox">
        <span>微信</span>
        <div>
          <input type="text" v-model="wx" placeholder="请输入微信"/>
        </div>
      </div>
      <div class="inpBox">
        <span>邮箱</span>
        <div>
          <input type="text" v-model="email" placeholder="请输入邮箱"/>
        </div>
      </div>
      <div class="inpBox">
        <span>职位种类</span>
        <div @click="prop(0)">
          <input
            type="text"
            v-model="postValue"
            placeholder="请选择职位种类"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>工作城市</span>
        <div @click="prop(1)">
          <input
            type="text"
            v-model="cityValue"
            placeholder="请选择工作城市"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>期望薪资</span>
        <div @click="prop(2)">
          <input
            type="text"
            v-model="payValue"
            placeholder="请选择期望薪资"
            readonly
          />
        </div>
      </div>
      <div class="inpBox">
        <span>求职状态</span>
        <div @click="prop(3)">
          <input
            type="text"
            v-model="stateValue"
            placeholder="请选择求职状态"
            readonly
          />
        </div>
      </div>
    </div>
    <mt-popup v-model="postIf" position="bottom">
      <p class="mt-p">
        <span @click="off(0)">取消</span>
        <span>请选择职位</span>
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="post"
        @change="postChange"
        value-key="positionTitle"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="cityIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span> 请选择城市
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker :slots="city" valueKey="name" @change="cityOn"></mt-picker>
    </mt-popup>
    <mt-popup v-model="payIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="payList"
        @change="payChange"
        value-key="salaryRange"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="stateIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择求职状态
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="stateLimit"
        @change="stateChange"
        value-key="value"
        class="picker"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import {Popup, Picker} from 'mint-ui'
import threeLevelAddress from '../assets/address.json'

var arrays = {
  前端开发: {
    不限: '',
    JavaScript: '',
    vue: '',
    HTML5: '',
  },
  后端开发: {
    不限: '',
    C语言: '',
    PHP: '',
    Python: '',
  },
  移动开发: {
    不限: '',
    HTML5: '',
    ios: '',
    微信小程序: '',
  },
  测试: {
    不限: '',
    自动化测试: '',
  },
  数据: {
    不限: '',
    数据架构师: '',
  },
  视觉设计: {
    不限: '',
    UI设计: '',
    网页设计师: '',
    美工: '',
    APP设计师: '',
  },
  交互设计: {
    不限: '',
    网页交互设计师: '',
  },
  用户研究: {
    不限: '',
    数据分析师: '',
    UX设计师: '',
  },
}
var arrays1 = {
  北京: {},
  天津: {},
  河北省: {},
  山西省: {},
  内蒙古自治区: {},
  辽宁省: {
    大连市: '',
  },
  吉林省: {},
  黑龙江省: {},
  上海: {},
  江苏省: {},
  浙江省: {},
  安徽省: {},
  福建省: {},
  江西省: {},
  山东省: {},
  河南省: {},
  湖北省: {},
  湖南省: {},
  广东省: {},
  广西省: {},
  海南省: {},
  重庆: {},
  四川省: {},
  贵州省: {},
}
var postValue = ''
var cityValue = ''
var cityValue2 = ''
var payValue = ''
var stateValue = ''
export default {
  inject: ['reload'],
  name: 'found',
  components: {Popup, Picker},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getData()
  },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data () {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      imgUrl: '',
      check: 0,
      name: '张三',
      birthday: '2020-01-01',
      phone: '12345678900',
      wx: '123456789',
      email: '123456789@qq.com',
      text: '',
      // city: '',
      // post: '',
      state: '',
      postValue: '',
      postAct: 0,
      postIf: false,
      positionTypeList: [],
      post: [
        {
          flex: 1,
          defaultIndex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center',
        },
        {
          divider: true,
          content: '-',
          className: 'slot2',
        },
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center',
        },
        {
          divider: true,
          content: '-',
          className: 'slot2',
        },
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center',

        }
      ],
      cityValue: '',
      cityAct: 0,
      cityIf: false,
      city: [
        {
          flex: 1,
          defaultIndex: 1,
          values: this.getProvinceArr(),
          className: 'slot1',
          textAlign: 'center',
        },
        {
          divider: true,
          content: '-',
          className: 'slot2',
        },
        {
          flex: 1,
          values: this.getCityArr('北京市'),
          className: 'slot3',
          textAlign: 'center',
        },
        {
          divider: true,
          content: '-',
          className: 'slot4',
        },
        {
          flex: 1,
          values: this.getCountyArr('北京市', '北京市'),
          className: 'slot5',
          textAlign: 'center',
        }
      ],
      payValue: '',
      payAct: 0,
      payIf: false,
      payList: [
        {
          values: ['不限', '2-4K', '4-6K', '6-7K', '7-9K', '10K以上'],
        },
      ],

      payValueId: '',
      cityValue2: '',
      pay: [],
      stateValue: '',
      stateAct: 0,
      stateIf: false,
      stateLimit: [
        {
          values: [
            '在职-考虑机会',
            '在职-月内到岗',
            '离职-随时到岗',
            '离职-暂不考虑',
          ],
        },
      ],
    }
  },
  // methods 编写js函数
  methods: {
    back () {
      this.$router.go(-1) //返回上一层
    },
    //创建简历
    save () {
      console.log(this.payValueId)
    },
    getData () {
      var positionTypeList = [
        {
          id: 1,
          positionTitle: '互联网/通信及硬件',
          positionList2: [
            {
              id: 3,
              positionTitle: '软件研发',
              positionTypeList2: [
                {
                  id: 4,
                  positionTitle: 'Java',
                },
                {
                  id: 4,
                  positionTitle: 'PHP',
                },
                {
                  id: 4,
                  positionTitle: 'Python',
                },

              ]
            },
            {
              id: 4,
              positionTitle: '前端开发',
            },
            {
              id: 5,
              positionTitle: '移动开发',
            }

          ]

        },
        {
          id: 2,
          positionTitle: '运维/测试',
          positionList2: [
            {
              id: 3,
              positionTitle: '软件测试',
              positionTypeList2: [
                {
                  id: 5,
                  positionTitle: 'aaa',
                },
                {
                  id: 5,
                  positionTitle: 'bbb',
                },
                {
                  id: 5,
                  positionTitle: 'ccc',
                }

              ]
            },
            {
              id: 4,
              positionTitle: '前端测试',
            },
            {
              id: 5,
              positionTitle: '移动测试',
            }

          ]

        }

      ]
      this.post[0].values = positionTypeList
      this.post[2].values = positionTypeList[0].positionList2
      this.post[4].values = positionTypeList[0].positionList2[0].positionTypeList2

      var salaryList = [
        {
          id: 1,
          salaryRange: '不限2222'
        },
        {
          id: 2,
          salaryRange: '2-4K'
        },
        {
          id: 3,
          salaryRange: '4-6K'
        },
        {
          id: 4,
          salaryRange: '6-7K'
        },
        {
          id: 5,
          salaryRange: '8-10K'
        }

      ]
      this.payList = [{values: salaryList}]
      var arr = []
      // for(var i in salaryList){
      // 	arr.push(salaryList[i].salaryRange)
      // }
      // console.log(arr);
      // this.payList[0].values = arr;
    },

    tirggerFile: function (event) {
      let file = event.target.files[0]
      let url = ''
      var reader = new FileReader()
      reader.readAsDataURL(file)
      let that = this
      reader.onload = function (e) {
        url = this.result.substring(this.result.indexOf(',') + 1)
        that.imgUrl = 'data:image/png;base64,' + url
      }
    },
    openImg () {
      this.$refs.input.click()
    },
    prop (i) {
      if (i == 0) {
        this.postIf = !this.postIf
      } else if (i == 1) {
        this.cityIf = !this.cityIf
      } else if (i == 2) {
        this.payIf = !this.payIf
      } else if (i == 3) {
        this.stateIf = !this.stateIf
      }
    },
    postChange (picker, values) {
      // console.log(values);
      picker.setSlotValues(1, values[0].positionList2)
      if (values[1].positionTypeList2 != null && values[1].positionTypeList2.length > 0) {
        picker.setSlotValues(2, values[1].positionTypeList2)
      } else {
        picker.setSlotValues(2, [])
      }

      postValue = values[2].positionTitle

      // if (arrays[values[0]]) {
      // picker.setSlotValues(1, Object.keys(arrays[values[0]]));
      //   picker.setSlotValues(2, arrays[values[0]][values[1]]);
      //   if (values[1] == undefined) {
      //     postValue = values[0];
      //   } else {
      //     postValue = values[1];
      //   }
      // }
    },
    cityOn (picker, values) {
      console.log(this.regionInit)

      if (this.regionInit) {
        //   //给市、县赋值
        picker.setSlotValues(1, this.getCityArr(values[0]['name']))
        //   console.log(values);
        picker.setSlotValues(2, this.getCountyArr(values[0]['name'], values[1]['name']))
        //   //取值并赋值

        cityValue = values[2]['name']

        cityValue2 = values[2]['code']

      } else {
        this.regionInit = true
      }
    },
    payChange (picker, values) {
      console.log(picker.values)
      console.log(values[0])
      payValue = picker.values[0].salaryRange
      this.payValueId = picker.values[0].id
    },
    stateChange (picker, values) {
      stateValue = picker.values[0]
    },
    on (i) {
      if (i == 0) {
        this.postValue = postValue
        this.postIf = false
      } else if (i == 1) {
        console.log(cityValue)
        this.cityValue = cityValue
        this.cityValue2 = cityValue2
        this.cityIf = false
      } else if (i == 2) {
        this.payValue = payValue
        this.payIf = false
      } else if (i == 3) {
        this.stateValue = stateValue
        this.stateIf = false
      }
    },
    off (i) {
      if (i == 0) {
        post = ''
        this.postIf = false
      } else if (i == 1) {
        cityValue = ''
        this.cityIf = false
      } else if (i == 2) {
        payValue = ''
        this.payIf = false
      } else if (i == 3) {
        stateValue = ''
        this.stateIf = false
      }
    },
    //遍历json，返回省级对象数组
    getProvinceArr () {
      // alert(1111);
      let provinceArr = []
      threeLevelAddress.forEach(function (item) {
        let obj = {}
        obj.name = item.name
        obj.code = item.code
        provinceArr.push(obj)
      })
      return provinceArr
    },
    //遍历json，返回市级对象数组
    getCityArr (province) {
      // console.log("省：" + province);
      let cityArr = []
      threeLevelAddress.forEach(function (item) {
        if (item.name === province) {
          item.children.forEach(function (args) {
            let obj = {}
            obj.name = args.name
            obj.code = args.code
            cityArr.push(obj)
          })
        }
      })
      return cityArr
    },
    //遍历json，返回县级对象数组
    getCountyArr (province, city) {
      // alert(province,city);
      let countyArr = []
      threeLevelAddress.forEach(function (item) {
        if (item.name === province) {
          item.children.forEach(function (args) {
            if (args.name === city) {
              args.children.forEach(function (param) {
                let obj = {}
                obj.name = param.name
                obj.code = param.code
                countyArr.push(obj)

              })
            }
          })
        }
      })
      console.log(countyArr)
      return countyArr
    },

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}

.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.inpBox img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}

.inpBox div {
  display: flex;
  align-items: center;
}

.inpBox div input[type="radio"] {
  margin-left: 20px;
  margin-right: 5px;
}

.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.inpBoxs .inpBox {
  border: 0;
}

.inpBoxs textarea {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
